<script lang="ts" setup>
import * as Api from '@/api'
import { closeToast, showToast } from 'vant';
import { showLoading } from '@/util/utils';
import { ref } from 'vue'
import { useRoute } from 'vue-router';

const route = useRoute()
const userId = ref<number>(0)

const handleSelectFile = async (e: Event) => {
  try {
    const toast = showLoading({
      message: '上传中0%'
    })
    let inputElement = e.target as HTMLInputElement;
    const fileList = inputElement.files;
    let form = new FormData()
    form.append('file', fileList[0])
    // form.append('user_id', userId.value)
    form.append('file_name', fileList[0].name)
    const res = await Api.pythonUploadFile(form, (e) => {
      toast.message = `上传中${parseInt((e.progress.toFixed(2) * 100).toString()) - 1}%`
    }) as any
    console.log('handleSelectFile=', res);
    closeToast(true)
    uni.webView.postMessage({
      data: {
        result: res.result
      }
    });
    uni.navigateBack()
  } catch (error) {
    console.log('上传失败', error);
    closeToast()
    showToast(error?.msg || error)
  }
}

userId.value = Number(route.query?.userId) || 0
</script>

<template>
  <div class="container">
    <div class="upload-icon">
      <img class="upload-icon-img" src="@/assets/images/upload.png" alt="上传图标">
    </div>
    <div class="upload-btn">
      <div class="upload-btn-txt">
        点击上传
      </div>
      <input type="file" id="fileInput" accept=".doc, .docx, .ppt, .pptx, .pdf" @change="handleSelectFile">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #F1F5FB;
  overflow: hidden;
}

.upload-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 240px auto 0;
  width: 90%;
  background-color: #fff;
  border-radius: 30px;
  padding: 120px 0;
}

.upload-icon-img {
  max-width: 100%;
  width: 340px;
  height: 280px;
}

$btn-border-radius: 45px;

.upload-btn {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 200px auto 0;
  width: 90%;
  height: 90px;
  background: linear-gradient(135deg, #ffb300 0%, #ff8400 100%);
  border-radius: $btn-border-radius;
  text-align: center;
  color: #fff;


  >input {
    width: 100%;
    height: 100%;
    border-radius: $btn-border-radius;
    opacity: 0;
  }
}

.upload-btn-txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>